<template>
  <div class="app-container">
    <!-- 添加或修改审批对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row :gutter="24">
        <el-col v-if="form.activityContent != 10" :span="6">
          <el-form-item label="活动名称" prop="activityName">
            <el-input v-model="form.activityName" placeholder="请输入活动名称" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.activityContent == 10" :span="12">
          <el-form-item label="培训会名称" prop="activityName">
            <el-input v-model="formModel.activityName" placeholder="请输入培训会名称" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.activityContent != 10" :span="6">
          <el-form-item label="活动类型" prop="activityContent">
            <el-select v-model="form.activityContent" placeholder="请选择活动类型" style="width: 100%">
              <el-option v-for="item in ActivityContentOptions" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动内容" prop="activityType">
            <el-select v-model="form.activityType" placeholder="请选择活动内容" style="width: 100%">
              <el-option v-for="item in ActivityTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动形式" prop="activityShape">
            <el-select v-model="form.activityShape" placeholder="请选择活动形式" style="width: 100%">
              <el-option label="线上" value="1" />
              <el-option label="线下" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="主办单位" prop="hostOrgId">
            <el-select v-model="form.hostOrgId" placeholder="请输入名称搜索主办单位" :loading="loading" :remote-method="searchHost"
              filterable clearable remote style="width: 100%">
              <!-- @change="searchCooperative" -->
              <el-option v-for="item in hostList" :key="item.sponsorCode" :label="item.sponsorName"
                :value="item.sponsorCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="协办单位" prop="cooperativeUnitName">
            <el-select v-model="form.cooperativeUnitName" placeholder="请输入名称搜索协办单位" :loading="loading"
              :remote-method="searchCooperative" filterable clearable remote style="width: 100%">
              <el-option v-for="item in cooperativeUnitList" :key="item.orgId" :label="item.orgName"
                :value="item.orgName" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <!-- <el-col :span="12">
            <el-form-item label="协办单位" prop="cooperativeUnitName">
              <el-input v-model="form.cooperativeUnitName" placeholder="请输入协办单位" />
            </el-form-item>
          </el-col> -->
        <el-col :span="12">
          <el-form-item label="活动开始时间" prop="activityStartTime">
            <el-date-picker v-model="form.activityStartTime" type="datetime" @change="changeDate1" placeholder="选择活动开始时间"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动结束时间" prop="activityEndTime">
            <el-date-picker v-model="form.activityEndTime" type="datetime" @change="changeDate1" placeholder="选择活动结束时间"
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="活动地点" prop="position">
            <el-input v-model="form.position" placeholder="请输入活动地点" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动介绍" prop="txt">
            <el-input v-model="form.txt" placeholder="需填写活动发起人联系方式或活动咨询群" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="海报" prop="postId">
            <el-upload :action="uploadFileUrl" :limit="1" list-type="picture" :file-list="postIdFileList">
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
              <span style="color: #999">
                图片推荐分辨率886*1200，等比例放大缩小</span>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-col :span="14">
            <el-form-item label="项目负责人(教师)" label-width="129px" prop="personTeacher">
              <el-select prop="personTeacher" v-model="form.personTeacher" placeholder="工号或姓名搜索" :loading="loading"
                :remote-method="searchTea" filterable remote style="width: 100%">
                <el-option v-for="item in teacherList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="0px" prop="personPhoneTeacher">
              <el-input prop="personPhoneTeacher" v-model="form.personPhoneTeacher" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目负责人(学生)" label-width="129px" prop="person">
            <el-col :span="12">
              <el-select v-model="form.person" placeholder="学号或姓名搜索" :loading="loading" :remote-method="searchUser"
                filterable remote style="width: 100%">
                <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="0px" prop="personPhone">
                <el-input prop="personPhone" v-model="form.personPhone" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预估活动规模" prop="size">
            <el-input v-model="form.size" placeholder="请输入预估活动规模" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-col :span="14">
            <el-form-item label="管理员1" label-width="75px" prop="adminId">
              <el-select prop="adminId" v-model="form.adminId" placeholder="学号或姓名搜索" :loading="loading"
                :remote-method="searchUser" filterable remote style="width: 100%">
                <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label-width="0px" prop="adminPhone">
              <el-input prop="adminPhone" v-model="form.adminPhone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管理员2" label-width="70px" prop="adminId2">
            <el-col :span="12">
              <el-select v-model="form.adminId2" placeholder="学号或姓名搜索" :loading="loading" :remote-method="searchUser"
                filterable remote style="width: 100%">
                <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-input v-model="form.adminPhone2" placeholder="请输入电话" />
            </el-col>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
            <el-form-item label="预申报积分" prop="mark">
              <el-input v-model="form.mark" placeholder="请输入预申报积分" />
            </el-form-item>
          </el-col> -->
        <el-col :span="24">
          <el-form-item label="报备信息" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入报备信息" type="textarea" :rows="2" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最大报名人数" prop="applyCount">
            <el-input v-model="form.applyCount" placeholder="请输入最大报名人数" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报名截止时间" prop="applyEndTime">
            <el-date-picker v-model="form.applyEndTime" @change="changeDate1" type="datetime" placeholder="选择报名截止时间"
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="活动区域" prop="movementArea">
            <el-radio-group v-model="form.movementArea">
              <el-radio label="校内" value="0" />
              <el-radio label="校外" value="1" />
              <!-- <el-radio :label="0">校内</el-radio>
                <el-radio :label="1">校外</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="报名限制" prop="restricted">
            <el-button size="small" type="primary" @click="handleLimit(0)">班级限制</el-button>
            <el-button size="small" type="primary" @click="handleLimit(1)">年级限制</el-button>
            <el-button size="small" type="primary" @click="handleLimit(2)">学院限制</el-button>
            <el-button size="small" type="primary" @click="handleLimit(3)">学生组织限制</el-button>
            <div style="font-size: 12px; color: #606266; margin-top: 7px">
              若添加限制，则仅有添加的指定限制单位所在成员可报名本活动
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="安全预案" prop="security">
            <el-upload :action="uploadFileUrl" :limit="1" :file-list="securityFileList">
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
              <div slot="tip" class="el-upload__tip">
                校内300人以上，校外30人以上必须上传安全预案
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="宣传部讲座审批单" prop="chair">
            <el-upload :action="uploadFileUrl" :limit="1" :file-list="chairFileList">
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
              <div slot="tip" class="el-upload__tip">
                若无此项审批单，则活动需由本组织所在指导单位负责人进行审批。
              </div>
              <!-- <span style="color:#999;font-size:12px;margin-left:10px">若无此项审批单，则活动需由本组织所在指导单位负责人进行审批。</span> -->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="宣传物品审批单" prop="materials">
            <el-upload :action="uploadFileUrl" :limit="1" :file-list="materialsFileList">
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="场地审批单" prop="place">
            <el-upload :action="uploadFileUrl" :limit="1" :file-list="placeFileList">
              <!-- <el-button size="small" type="primary">点击上传</el-button> -->
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-show="parentTaskId === null" class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify ref="verifyRef" :taskId="taskId" @submitCallback="submitCallback" :taskVariables="taskVariables"
      :sendMessage="sendMessage"></verify>
    <!-- 工作流结束 -->

    <!-- 弹框 -->
    <el-dialog :title="title + '限制'" :visible.sync="limitDialog" width="600px" append-to-body>
      <el-card>
        <el-tag v-if="limitType == 0 && form.majorsRestricted.length > 0"
          style="margin-right: 5px; margin-bottom: 5px" v-for="(tag0, index) in form.majorsRestricted" :key="index"
          closable :disable-transitions="false">
          {{ tag0 }}
        </el-tag>
        <el-tag v-if="limitType == 1 && form.gradeRestricted.length > 0"
          style="margin-right: 5px; margin-bottom: 5px" v-for="(tag1, index) in form.gradeRestricted" :key="index"
          closable :disable-transitions="false">
          {{ tag1 }}
        </el-tag>
        <el-tag v-if="limitType == 2 && form.unitRestricted.length > 0" style="margin-right: 5px; margin-bottom: 5px"
          v-for="(tag2, index) in form.unitRestrictedName" :key="index" closable :disable-transitions="false"
          >
          {{ tag2 }}
        </el-tag>
        <el-tag v-if="limitType == 3 && form.stuOrgRestricted.length > 0"
          style="margin-right: 5px; margin-bottom: 5px" v-for="(tag3, index) in form.stuOrgRestrictedName"
          :key="index" closable :disable-transitions="false">
          {{ tag3 }}
        </el-tag>
        <el-select v-if="limitType == 0" v-model="inputValue" :placeholder="title + '搜索'" :loading="loading"
          :remote-method="getOrgIdList" filterable remote>
          <el-option v-for="item in searchOrgList" :key="item.classNo" :label="item.classNo" :value="item.classNo" />
        </el-select>
        <el-select v-if="limitType == 1" v-model="inputValue" :placeholder="title + '搜索'" :loading="loading"
          filterable remote>
          <el-option label="2018" value="2018" />
          <el-option label="2019" value="2019" />
          <el-option label="2020" value="2020" />
          <el-option label="2021" value="2021" />
          <el-option label="2022" value="2022" />
          <el-option label="2020研究生" value="2020研究生" />
          <el-option label="2021研究生" value="2021研究生" />
          <el-option label="2022研究生" value="2022研究生" />
        </el-select>
        <el-select v-if="limitType == 2" v-model="inputValue" :placeholder="title + '搜索'" :loading="loading"
          :remote-method="searchHost" filterable remote>
          <el-option v-for="item in hostList" :key="item.sponsorCode" :label="item.sponsorName" :value="item" />
        </el-select>
        <el-select v-if="limitType == 3" v-model="inputValue" :placeholder="title + '搜索'" :loading="loading"
          :remote-method="getOrgIdList" filterable remote>
          <el-option v-for="item in searchOrgList" :key="item.orgId" :label="item.orgName" :value="item" />
        </el-select>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="limitDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listSponsor } from '@/api/system/sponsor';
import {
  GetOrgList,
  GetUserList,
  GetTeacherList,
  CreateActivity,
  EditActivity,
  GetActivityDetail,
  listOrg,
  listOrg3,
} from '@/api/activity';
import { GetUrlString } from '@/utils/string';
import { ActivityContentOptions, ActivityTypeOptions } from '../enum';
import verify from "@/components/Process/Verify";

export default {
  name: "act",
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String // 任务id
  },
  components: {
    verify
  },
  data() {
    return {
      ActivityContentOptions,
      ActivityTypeOptions,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 请假业务表格数据
      leaveList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        activityContent: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
        activityType: [{ required: true, message: '请选择活动内容', trigger: 'change' }],
        hostOrgId: [{ required: true, message: '请选择主办单位', trigger: 'change' }],
        cooperativeUnitName: [{ required: true, message: '请选择协办单位', trigger: 'change' }],
        activityStartTime: [{ required: true, message: '选择活动开始时间', trigger: 'change' }],
        activityEndTime: [{ required: true, message: '活动结束时间', trigger: 'change' }],
        position: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
        txt: [{ required: true, message: '请输入活动介绍', trigger: 'blur' }],
        postId: [{ required: true, message: '活动海报不能为空', trigger: 'blur' }],
        size: [{ required: true, message: '请输入预估活动规模', trigger: 'blur' }],
        adminId: [{ required: true, message: '请选择管理员', trigger: 'change' }],
        adminPhone: [{ required: true, message: '请输入管理员电话', trigger: 'blur' }],
        applyCount: [{ required: true, message: '请输入最大报名人数', trigger: 'blur' }],
        applyEndTime: [{ required: true, message: '选择报名截止时间', trigger: 'change' }],
        place: [{ required: true, message: '选上传场地审批单', trigger: 'blur' }],
        over: [{ required: true, message: '选上传办结文件', trigger: 'blur' }],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},

      studentId: "",
      teacherList: [], //老师列表
      userList: [], //管理员列表
      cooperativeUnitList: [], //协办单位列表

      hostList: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/images/uploadLocal',
      postIdFileList: [],
      securityFileList: [],
      chairFileList: [],
      materialsFileList: [],
      placeFileList: [],
      overFileList: [],

      limitDialog: false,
      limitType: 0,
      dynamicTags: [],
      searchOrgList: [],
      inputValue: '',
      title:'',
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById()
        }
      }
    }
  },
  methods: {
    getOrgIdList(orgName){
      console.log(orgName, 'LIst');
      if (orgName !== '') {
        this.loading = true;
        const queryParams = {
          pageNum: 1,
          pageSize: 30,
          type: this.limitType + 1,
          orgName: orgName,
        };
        if (this.limitType != 3) {
          listOrg(queryParams).then(response => {
            this.searchOrgList = response.rows;
            this.loading = false;
          });
        } else {
          queryParams.type = null;
          listOrg3(queryParams).then(response => {
            this.searchOrgList = response.rows;
            this.loading = false;
          });
        }
      } else {
        this.searchOrgList = [];
      }
    },
    /** 限制弹框 */
    handleLimit(type) {
      const typeArr = ['班级', '年级', '学院', '学生组织'];
      this.searchOrgList = [];
      this.limitDialog = true;
      this.title = typeArr[type];
      this.limitType = type;
      this.inputValue = '';
    },
    async searchHost(query) {
      this.loading = true;
      const payload = {
        studentId: this.studentId == 'admin' ? '' : this.studentId,
        unitName: query,
        userType: 1,
        pageSize: 99,
        pageNum: 1,
      };
      const response = await listSponsor(payload);
      this.loading = false;
      if (response.code === 200) {
        this.hostList = response.rows;
      }
    },

    async searchCooperative(query) {
      this.loading = true;
      const payload = {
        orgName: query,
        pageSize: 99,
        pageNum: 1,
      };
      const response = await GetOrgList(payload);
      this.loading = false;
      if (response.code === 200) {
        this.cooperativeUnitList = response.rows;
      }
    },
    async searchUser(query) {
      this.loading = true;
      const payload = {
        keyword: query,
        pageSize: 99,
        pageNum: 1,
      };
      const response = await GetUserList(query);
      this.loading = false;
      if (response.code === 200) {
        this.userList = response.rows;
      }
    },

    async searchTea(query) {
      this.loading = true;
      const payload = {
        keyword: query,
        pageSize: 99,
        pageNum: 1,
      };
      const response = await GetTeacherList(query);
      this.loading = false;
      console.log(response);
      if (response.code === 200) {
        this.teacherList = response.rows;
      }
    },
    submitCallback() {
      this.$emit("closeForm")
    },
    async getById() {
      const { data } = await GetActivityDetail(this.businessKey)
      this.form = data;
      this.form.majorsRestricted = this.form.majorsRestricted
        ? this.form.majorsRestricted.split(',')
        : [];
      this.form.gradeRestricted = this.form.gradeRestricted
        ? this.form.gradeRestricted.split(',')
        : [];
      this.form.unitRestricted = this.form.unitRestricted
        ? this.form.unitRestricted.split(',')
        : []; //学院限制
      this.form.unitRestrictedName = this.form.unitRestrictedName
        ? this.form.unitRestrictedName.split(',')
        : [];
      this.form.stuOrgRestricted = this.form.stuOrgRestricted
        ? this.form.stuOrgRestricted.split(',')
        : [];
      this.form.stuOrgRestrictedName = this.form.stuOrgRestrictedName
        ? this.form.stuOrgRestrictedName.split(',')
        : [];
      const {
        hostName,
        cooperativeUnitName,
        adminId,
        postId,
        security,
        chair,
        materials,
        place,
        over,
      } = data;
      this.searchHost(hostName);
      this.searchCooperative(cooperativeUnitName);
      this.searchUser(adminId);
      // searchUser(adminId2);
      this.postIdFileList = postId ? [{ name: GetUrlString(postId, 'name'), url: postId }] : [];
      this.securityFileList = security ? [{ name: security, url: security }] : [];
      this.chairFileList = chair ? [{ name: chair, url: chair }] : [];
      this.materialsFileList = materials ? [{ name: materials, url: materials }] : [];
      this.placeFileList = place ? [{ name: place, url: place }] : [];
      this.overFileList = over ? [{ name: over, url: over }] : [];
    },
    // 判断日期前后
    changeDate1() {
      if (
        this.form.activityEndTime != null &&
        this.form.activityEndTime != '' &&
        this.form.activityEndTime != undefined
      ) {
        console.log(this.form.activityStartTime, this.form.activityEndTime, 'time');
        if (this.form.activityStartTime > this.form.activityEndTime) {
          // || this.form.activityEndTime.includes(this.form.activityStartTime)
          Message.error({
            message: '活动结束时间需大于等于活动开始时间',
          });
          this.form.activityEndTime = '';
        } else {
          console.log(222);
        }
      }
      if (
        this.form.applyEndTime != null &&
        this.form.applyEndTime != '' &&
        this.form.applyEndTime != undefined
      ) {
        console.log(this.form.activityStartTime, this.form.applyEndTime, 'time');
        if (this.form.activityStartTime < this.form.applyEndTime) {
          Message.error({
            message: '活动开始时间时间需大于等于报名截止',
          });
          this.form.applyEndTime = '';
        } else {
          console.log(222);
        }
      }
    },
    /** 提交按钮 */
    submitForm() {
      GetActivityDetail(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userId: 1
        };
      });
      this.$refs.verifyRef.visible = true
      this.$refs.verifyRef.reset()
    }
  }
};
</script>
